/*
 * @Author: LiYuan
 * @Date: 2021-02-07 09:24:11
 * @LastEditTime: 2021-02-07 11:47:34
 * @LastEditors: LiYuan
 * @Description: 按钮组
 * @You build it, You run it.
 */

/* vue */
import VC from '@model/VC'
import { Component, Emit, Prop, Ref } from 'vue-property-decorator'
import { CreateElement } from 'vue'
/* scss */
import './BizButtonGroup.scss'

interface buttonListItem {
  type: String,
  name: String,
  text: String,
  icon?: String,
  iconPosition?: String,
}

@Component({ 
  name: 'biz-button-group'
})

export default class BizButtonGroup extends VC {
  
  /* 工单信息 */
  @Prop() readonly groupData: any | undefined
  
  /** 
   * @description 按钮点击事件
  */
  @Emit('handleClick')
  private handleClick(item: any, $event:any,) {
    return item
  }
  
  render(h: CreateElement) {
    return (
        <div class="biz-button-group">
          {
            this.groupData.map((item:buttonListItem) => {
              const normalButton = (
                <el-button 
                  type="primary"
                  onClick={($event:any) => this.handleClick(item, $event)}
                  class={`biz-button-group__button biz-button-group__normal ${item.iconPosition === 'right' ? 'right' : ''}`} 
                >
                  <i class={`iconfont ${item.icon}`}></i>
                  { item.text }
                </el-button>
              )
              const textButton = (
                <div 
                  onClick={($event:any) => this.handleClick(item, $event)}
                  class={`biz-button-group__button biz-button-group__text ${item.iconPosition === 'right' ? 'right' : ''}`}
                >
                  <i class={`iconfont ${item.icon}`}></i>
                  <span>{ item.text }</span>
                </div>
              )
              if (item.type === 'button') {
                return normalButton
              } else if (item.type === 'text'){
                return textButton
              }
            })
          }
        </div>
    )
  }
}

